<template>
    <div id="max">
        <div id="mid-1">
            <div>设置/系统日志</div>
        </div>
        <div id="mid-2">
            <div id="small-1">
                <div id="shang">
                    <div id="shangSon" class="demo-input-size">
                        <span>组织：</span>
                        <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                    <div id="shangSon" class="demo-input-size">
                        <span>操作人：</span>
                        <el-input v-model="input2" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                    <div id="shangSon" class="demo-input-size">
                        <span>操作时间：</span>
                        <el-input v-model="input4" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                </div>
                <div id="xia">
                    <div id="xiaSon" class="demo-input-size">
                        <span>操作内容：</span>
                        <el-input v-model="input3" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                </div>
            </div>
            <div id="small-2">
                <el-button type="primary" @click="seek()">查询</el-button>
                <el-button @click="resetting()">重置</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import axios from 'axios';
import { defineComponent, ref } from 'vue';

export default defineComponent({
    name: "top",
    setup() {
        let input1 = ref('');//组织
        let input2 = ref('');//操作人
        let input3 = ref('');//操作内容
        let input4 = ref('');//操作内容
        let value = ref('');//操作时间

        const options = [
            {
                value: '2017',
                label: '2017',
            },
            {
                value: '2018',
                label: '2018',
            },
            {
                value: '2019',
                label: '2019',
            },
            {
                value: '2020',
                label: '2020',
            },
            {
                value: '2021',
                label: '2021',
            },
        ]

        function seek() {
            axios({
                method:'get',
                url:'/log/queryConditionalLog',
                params: {
                    currentPage: 1,//当前页码
                    pageSize: 10,//每页数据
                    operationContent:input3.value,//操作内容
                    operationTime:value.value,//操作时间
                    operator:input2.value,//操作人
                    organization:input1.value,//组织
                }
            }).then((res) => {
                console.log("查询成功");

            })
        }

        let resetting=()=>{
        input1.value=("");
        input2.value=("");
        input3.value=("");
        input4.value=("");
        value.value=("");

       }

        return {
            input1,//组织
            input2,//操作人
            input3,//操作内容
            input4,
            value,//操作时间
            options,//操作时间
            seek,//查询
            resetting//重置

        }
    }
})

</script>
<style scoped>
#max {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: white;
    font-size: 13px;
    color: #333;
}

#mid-1 {
    display: flex;
    background-color: #f5f5f5;
}

#mid-2 {
    display: flex;
    flex-direction: column;
}

#small-1 {
    margin: 20px;
}

#small-2 {
    margin: 15px 35px;
}

#shang {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;

}

#xia {
    display: flex;
    margin: 10px 0;
}

#shangSon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin: 5px 20px;

}

#xiaSon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin: 5px 20px;
}

button {
    width: 80px;
}

span {
    width: 120px;
}</style>